<template>
  <view class="page">
    <view class="tab-list">
      <view class="tab-item" :class="{ active: currentActiveTab === 'doTopic' }" @click="currentActiveTabChange('doTopic')">刷题</view>
      <view
        class="tab-item"
        :class="{ active: currentActiveTab === 'learningVocabulary' }"
        @click="currentActiveTabChange('learningVocabulary')"
        >背单词</view
      >
    </view>
    <view class="task-list" v-if="!noData">
      <view class="task-item" v-for="(item, index) in taskList" :key="index">
        <view class="title">{{ item.taskContent }}</view>
        <view class="info">
          <text class="label">打卡要求：</text>
          <text class="value">{{ item.taskAsk }}</text>
        </view>
        <view class="info">
          <text class="label">截至日期：</text>
          <text class="value">{{ item.taskDate }}</text>
        </view>
        <view class="info">
          <text class="label">发布时间：</text>
          <text class="value">{{ item.createTime }}</text>
        </view>
        <view class="info">
          <text class="label">打卡进度：</text>
          <text class="value">
            <text>{{ item.doTopicNum ? item.doTopicNum : 0 }}</text>
            <text>\t/\t</text>
            <text>{{ item.topicNum }}</text>
          </text>
        </view>
        <!--				未打卡-->
        <view class="btn" v-if="item.clockinStatus === 'NotClockin'" @click="initTask(item)">开始打卡</view>
        <!--				刷题任务-->
        <template v-if="currentActiveTab === 'doTopic'">
          <!--				打卡中-->
          <view class="btn" v-if="item.clockinStatus === 'Clockin'" @click="goPaperStructureList(item)">继续打卡</view>
          <!--				已完成-->
          <view class="btn finished" v-else-if="item.clockinStatus === 'Complete'" @click="goPaperStructureList(item)">已完成</view>
        </template>
        <!--				背单词任务-->
        <template v-else-if="currentActiveTab === 'learningVocabulary'">
          <!--				打卡中-->
          <view class="btn" v-if="item.clockinStatus === 'Clockin'" @click="goWordTaskDetail(item)">继续打卡</view>
          <!--				已完成-->
          <view class="btn finished" v-else-if="item.clockinStatus === 'Complete'" @click="goWordTaskDetail(item)">已完成</view>
        </template>
      </view>
      <uni-load-more :status="loadMoreStatusText"></uni-load-more>
    </view>
    <empty v-else height="calc(100vh - 104rpx)" />
  </view>
</template>

<script>
import request from "@/utils/request"
import empty from "@/components/empty.vue"
import { handleUrlParams } from "@/utils"
import store from "@/store"
import { vocabularyLearningActionType } from "@/store/modules/vocabularyLearning"
let firstOpen = true //是否是第一次打开该页面
export default {
  data() {
    return {
      pagination: {
        current: 1,
        size: 10,
      },
      noData: false,
      loadMoreStatusText: "more",
      taskList: [],
      currentActiveTab: "doTopic", // 当前选中的tab，doTopic: 刷题，learningVocabulary: 背单词
    }
  },
  components: { empty },
  onLoad() {
    this.resetPaginationLoadData()
  },
  methods: {
    currentActiveTabChange(val) {
      this.currentActiveTab = val
      this.resetPaginationLoadData()
    },
    getTaskList() {
      return new Promise((resolve, reject) => {
        if (this.loadMoreStatusText === "loading") {
          resolve()
          return
        }
        this.loadMoreStatusText = "loading"
        let url = ""
        switch (this.currentActiveTab) {
          //刷题
          case "doTopic":
            url = "taskAssignment/listUserTaskAssignment"
            break
          //背单词
          case "learningVocabulary":
            url = "taskAssignment/wordTaskAssignmentList"
            break
        }
        request({
          url: url,
          data: this.pagination,
          errorHandle: true,
        })
          .then((data) => {
            if (data.total === 0) {
              this.noData = true
              this.loadMoreStatusText = "noMore"
              resolve()
              return
            }
            this.taskList = [...this.taskList, ...data.records]
            if (this.taskList.length >= data.total) {
              this.loadMoreStatusText = "noMore"
            } else {
              this.loadMoreStatusText = "more"
            }
            resolve()
          })
          .catch((err) => {
            this.loadMoreStatusText = "more"
            reject()
          })
      })
    },
    resetPaginationLoadData() {
      this.pagination.current = 1
      this.taskList = []
      this.loadMoreStatusText = "more"
      this.noData = false
      uni.showLoading({
        title: "加载中",
      })
      this.getTaskList().finally(() => {
        uni.hideLoading()
      })
    },
    //初次打卡先初始化数据
    initTask(item) {
      request({
        url: "taskAssignment/startDoTopicTask",
        showLoading: true,
        errorHandle: true,
        data: {
          taskId: item.taskId,
        },
      }).then(() => {
        switch (this.currentActiveTab) {
          case "doTopic":
            this.goPaperStructureList(item)
            break
          case "learningVocabulary":
            this.goWordTaskDetail(item)
            break
        }
      })
    },
    //跳转到试卷结构列表页面
    goPaperStructureList(item) {
      uni.navigateTo({
        url: handleUrlParams("/mine/pages/task/taskPaperStructure", {
          taskId: item.taskId,
          structureYear: item.structureYear,
          structureName: item.structureName,
        }),
      })
    },
    //跳转到背单词打卡计划界面
    async goWordTaskDetail(item) {
      uni.navigateTo({
        url: handleUrlParams(
					"/vocabulary/pages/currentPlanInfo/index",
					{
						thesaurusId: item.thesaurusId,
					}
				),
      })
    },
  },
  onReachBottom() {
    if (this.loadMoreStatusText === "noMore") {
      return
    }
    this.pagination.current++
    this.getTaskList()
  },
  //下拉刷新
  onPullDownRefresh() {
    this.resetPaginationLoadData()
    uni.stopPullDownRefresh()
  },
}
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background: var(--gray-background-color);
  padding-top: 104rpx;
  .tab-list {
    background: var(--background-color);
    padding: 20rpx;
    display: flex;
    box-shadow: 0 2rpx 4rpx 0 rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    .tab-item {
      padding: 10rpx 30rpx;
      border-radius: 30rpx;
      font-size: 30rpx;
      border: 2rpx solid var(--dark-border-color);
      margin-right: 20rpx;
      &.active {
        background: var(--theme-color);
        color: var(--text-color-white);
        border-color: var(--theme-color);
      }
    }
  }
  .task-list {
    padding: 30rpx;
    .task-item {
      background: #fff;
      border-radius: 20rpx;
      padding: 30rpx;
      margin-bottom: 30rpx;
      .title {
        font-size: 36rpx;
        font-weight: bold;
        margin-bottom: 20rpx;
      }
      .info {
        font-size: 30rpx;
        &:not(:last-child) {
          margin-bottom: 14rpx;
        }
        .label {
          color: var(--text-color-light);
          display: inline-block;
          width: 150rpx;
        }
      }
      .btn {
        background: var(--theme-color);
        text-align: center;
        border-radius: 10rpx;
        padding: 14rpx 0;
        margin-top: 20rpx;
        font-size: 32rpx;
        color: var(--text-color-white);
        &.disabled {
          background: #e1e1e1;
          color: var(--text-color-light);
        }
        &.finished {
          background: var(--theme-color-light);
          color: var(--text-color-theme);
        }
      }
    }
  }
}
</style>
